<template>
   <div class="wrap" :style="{minHeight:$store.state.minHeight+'rem'}">
      <myHead title="二手市场"></myHead>
      <div class="content">
         <div class="header">
            <div class="headerBox" v-for="(x,y) in typeTit" @click="type(y)">
               <p :class="typeIndex == y?'showTyped showType':'showType'">{{x.text}}</p>
               <transition name="el-zoom-in-center">
                  <p v-show="y == typeIndex"></p>
               </transition>
            </div>

            <!-- 侧边菜单栏 -->
            <div class="rt-menu-wrap">
               <p class="rt-menu" @click="menuShow=false"><img src="../../../static/img/chouti.png" alt=""></p>
            </div>
         </div>
         <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
            >
               <van-cell v-for="item in list" :key="item.id" >
                  <!--  消息部分  -->
                  <div class="reco-box" @click="toDetail(item.id)">
                     <div class="reco-head">
                        <div class="reco-h-l">
                           <div class="reco-h-uh">
                              <img :src="item.avatar" alt="">
                           </div>
                           <div class="reco-h-un"><p>{{item.nickname}}</p><p>{{item.bio?item.bio:'暂无'}}&nbsp;|&nbsp;{{item.addtime | formatDate}}</p></div>
                        </div>
                        <p>￥{{item.price}}</p>
                     </div>
                     <div class="reco-shopName">
                        <p>{{item.content}}</p>
                        <p>立即抢购</p>
                     </div>
                     <div class="reco-shopImg">
                        <img src="../../../static/img/es1.png" alt=""><img src="../../../static/img/es2.png" alt=""><img src="../../../static/img/es3.png" alt="">
                     </div>
                     <div class="reco-dz">
                        <div class="reco-dz-box">
                           <img src="../../../static/img/dingwei424.png" alt="" style="height: .23rem">
                           <p>西安财经</p>
                        </div>
                        <div class="reco-dz-box">
                           <img src="../../../static/img/tz2.png" alt="">
                           <p>85</p>
                        </div>
                        <div class="reco-dz-box">
                           <img src="../../../static/img/tz4.png" alt="">
                           <p>98</p>
                        </div>
                     </div>
                  </div>
               </van-cell>
            </van-list>
         </van-pull-refresh>
      </div>

      <!-- 侧边菜单栏 -->
      <van-popup v-model="menuShow" position="top" :style="{ height: '30%' ,width:'100%',top:'1rem'}">
            <div class="menu-wrap">
               <div class="menu-box" v-for="x in menuList">{{x.text}}</div>
            </div>
      </van-popup>
   </div>
</template>

<script>
    import myHead from "../../components/ClientComponents/lib/myHead";
    import {formatDate} from "../../methods/time";
    export default {
        name: "secondHandMarket",
        components:{
            myHead
        },
        filters: {
          formatDate(time) {
            time = time * 1000;
            let date = new Date(time);
            return formatDate(date, 'yyyy/MM/dd')
          }
        },
        data(){
            return {
                typeTit:[{text:'关注'},{text:'推荐'},{text:'热门'}],
                data:[{list:[]},{list:[]}],
                list:[],
                loading: false,
                finished: false,
                refreshing: false,
                typeIndex:0,
                page:1, // 当前数据页
                menuShow:false, // 侧边菜单的显示
                menuList:[{text:'衣服'},{text:'书籍'},{text:'鞋子'},{text:'衣服'},{text:'电子产品'},{text:'衣服'},{text:'手机'},{text:'电脑桌'},{text:'书籍'},{text:'生活用品'}] // 菜单条目列表
            }
        },
        methods:{
          onLoad(typeIndex = this.typeIndex) {
            if (this.refreshing) {
              this.page = 1;
              this.refreshing = false;
              this.$myAxios('index/Classify/headline_used','post',{
                user_id:this.$myStorage.query(),
                headline_id:typeIndex,
                page:this.page
              }).then(res=>{
                if (res.data.state == '1') {
                  if(res.data.headline_used.data.length < 1){
                    this.finished = true;
                  }else {
                    this.page+=1;
                  }

                  this.list = this.list.concat(res.data.headline_used.data);
                  this.loading = false;
                } else {
                  this.error = true;
                }
              }).catch(res=>{
                this.error = true;
              });
              return;
            }
            this.$myAxios('index/Classify/headline_used','post',{
              user_id:this.$myStorage.query(),
              headline_id:1,
              page:this.page
            }).then(res=>{
              console.log(res.data.headline_used);
              if (res.data.state == '1') {
                if(res.data.headline_used.data.length < 1){
                  this.finished = true;
                }else {
                  this.page+=1;
                }
                // for(let i= 0;i<res.data.headline_used.length;i++){
                //   if(res.data.headline_consult.data[i].image){
                //     res.data.headline_consult.data[i].image = res.data.headline_consult.data[i].image.split(",")
                //   }
                // }
                this.list = this.list.concat(res.data.headline_used.data);
                this.loading = false;
              } else {
                this.error = true;
              }
            }).catch(res=>{
              this.error = true;
            });
          },
            onRefresh() {
              this.list=[];
              this.finished = false;

              // 重新加载数据
              // 将 loading 设置为 true，表示处于加载状态
              this.loading = true;
              // this.onLoad(this.typeIndex);
            },
            // 切换type
            type(index){
              if (this.typeIndex == index){return}
              $('.van-pull-refresh').scrollTop(0);
              this.typeIndex = index;
              this.page = 1;
              this.finished = false;
              this.list=[];
              // this.onLoad(this.typeIndex,true);
            },
            jump(page){
                this.$router.push({
                    name:page
                })
            },
            toDetail(id){
              this.$router.push({
                path:"/views/Client/twoHandShopDetail",
                query:{id:id}
              })
            }
        }
    }
</script>

<style scoped>
  .wrap {
    width: 100%;
    box-sizing: border-box;
    padding-top: .95rem;
    background-color: #F5F5F5;
  }
  .header {
     position: fixed;
     top: .5rem;
     left: 0;
     z-index: 101;
     background-color: #FFFFFF;
     height: .5rem;
     width: 3.75rem;
     white-space: nowrap;
     overflow-y: hidden;
     overflow-x: scroll;
     display: -webkit-box;
  }
  .header::-webkit-scrollbar {
     display: none;
  }
  .rt-menu {
     position: absolute;
     top: 0;
     right: 0;
     height: .3rem;
     width: .3rem;
     display: flex;
     flex-flow: row;
     align-items: center;
     justify-content: center;
     background-color: #FFFFFF;
     box-sizing: border-box;
     padding-top: .1rem;
  }
  .rt-menu>img {
     width: .13rem;
     height: .13rem;
  }
  .rt-menu-wrap {
     position: fixed;
     top: .5rem;
     right: 0;
     width: .4rem;
     height: .5rem;
     background-color: #FFFFFF;
     overflow: hidden;
  }



  .headerBox {
     width: .7rem;
     height: 100%;
     position: relative;
     display: flex;
     flex-flow: column;
     align-items: center;
  }
  .headerBox>p:nth-child(2) {
     width: 55%;
     position: absolute;
     bottom: .05rem;
     height: .02rem;
     background-color: #FF8C3D;
  }
  .showType {
     height: .4rem;
     line-height: .4rem;
     font-size:.14rem;
     font-family:PingFang SC;
     font-weight:bold;
     color: #333333;
  }
  .showTyped {
     color: #FF8C3D;
  }



  .reco-box {
     background-color: #FFFFFF;
     margin-bottom: .1rem;
     box-sizing: border-box;
     padding: .15rem;
  }
  .reco-head {
     width: 100%;
     height: .32rem;
     display: flex;
     flex-flow: row;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: .1rem;
  }
  .reco-h-l {
     height: 100%;
     display: flex;
     flex-flow: row;
     align-items: center;
  }
  .reco-head>p {
     font-size:.18rem;
     font-family:PingFang SC;
     font-weight:500;
     color: #FF0101;
     line-height: .18rem;
     padding-right: .1rem;
  }
  .reco-h-uh {
     width:.32rem;
     height:.32rem;
     font-size: 0;
     position: relative;
     margin-right: .15rem;
  }
  .reco-h-un {
     height: .32rem;
     display: flex;
     flex-flow: column;
     justify-content: space-between;
  }
  .reco-h-un>p:nth-child(1) {
     font-size:.15rem;
     font-family:PingFang SC;
     font-weight:400;
     color: #333333;
     line-height: .16rem;
  }
  .reco-h-un>p:nth-child(2) {
     font-size:.11rem;
     line-height: .12rem;
     font-family:PingFang SC;
     font-weight:400;
     color: #999999;
  }
  .reco-h-uh>img:nth-child(1) {
     width:.32rem;
     height:.32rem;
     border-radius:.04rem;
  }
  .reco-h-uh>img:nth-child(2) {
     width: .15rem;
     height: .15rem;
     position: absolute;
     bottom: -.02rem;
     right: -.05rem;
  }
  .reco-shopName {
     display: flex;
     flex-flow: row;
     align-items: center;
     justify-content: space-between;
     margin-bottom: .1rem;
  }
  .reco-shopName>p:nth-child(1) {
     font-size:.15rem;
     font-family:PingFang SC;
     font-weight:500;
     color: #333333;
  }
  .reco-shopName>p:nth-child(2) {
     width:.77rem;
     height:.25rem;
     background:rgba(255,29,29,1);
     border-radius:.13rem;
     color: #FFFFFF;
     font-size:.12rem;
     font-family:PingFang SC;
     font-weight:500;
     text-align: center;
     line-height: .25rem;
  }
  .reco-shopImg {
     width: 100%;
     display: flex;
     flex-flow: row wrap;
     align-items: center;
     justify-content: space-between;
     margin-bottom: .1rem;
  }
  .reco-shopImg>img {
     width:1.12rem;
     height:1.12rem;
     border-radius:.04rem;
     margin-bottom: .05rem;
  }
  .reco-dz {
     width: 100%;
     height: .3rem;
     display: flex;
     flex-flow: row;
     align-items: center;
     justify-content: space-between;
  }
  .reco-dz-box {
     display: flex;
     flex-flow: row;
     align-items: center;
     width: .5rem;
     justify-content: flex-end;
  }
  .reco-dz-box:nth-child(1) {
     width: 35%;
     justify-content: flex-start;
  }
  .reco-dz-box:nth-child(1)>p {
     width: 100%;
     text-align: left;
  }
  .reco-dz-box>p {
     text-align: center;
     width: .3rem;
     font-size:.12rem;
     font-family:SourceHanSansCN;
     font-weight:400;
     color: #999999;
  }
  .reco-dz-box>img {
     width: .18rem;
     height: .18rem;
     margin-right: .05rem;
  }

   .menu-wrap {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: .15rem;
      display: flex;
      flex-flow: row wrap;
      /*justify-content: space-between;*/
   }

   .menu-box {
      width: 20%;
      text-align: center;
      font-size:.14rem;
      font-family:PingFang SC;
      font-weight:500;
      color: #999999;
   }

  /* 懒加载适配 */
  >>> .van-cell {
     padding: 0;
     line-height: 0;
     font-size: 0;
  }
  >>> .van-list__loading {
     font-size: .14rem;
     line-height: .5rem;
  }
  >>> .van-loading__spinner--circular{
     width: .16rem;
     height: .16rem;
  }
  >>> .van-loading__text {
     font-size: .14rem;
     margin-left: .08rem;
  }

/*  下拉菜单适配 */
   >>> .van-overlay {
      top: .6rem;
   }
   >>> .van-popup--top {
      z-index: 99 !important;
   }
   >>> .van-overlay {
      z-index: 98 !important;
   }
</style>
